<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getCategoryListApi, getProductsByCategoryApi } from "../api/category";

const router = useRouter();
const active = ref(0);
const searchValue = ref(""); // 搜索框的值

// 分类数据
const categories = ref([]); // 主分类
const categoryProducts = ref([]); // 当前分类下的商品

// 搜索函数
const onSearch = () => {
  // 这里可以添加搜索逻辑
  console.log("搜索:", searchValue.value);
};

// 获取主分类数据
const fetchCategories = async () => {
  try {
    console.log("开始获取分类数据...");
    const res = await getCategoryListApi();
    console.log("分类数据响应:", res);

    if (res.success) {
      categories.value = res.data;
      console.log("获取到的分类:", categories.value);

      // 默认加载第一个分类的商品
      if (res.data.length > 0) {
        console.log("加载第一个分类的商品:", res.data[0]);
        await fetchCategoryProducts(res.data[0]);
      }
    } else {
      console.error("获取分类失败:", res.message);
    }
  } catch (error) {
    console.error("获取分类数据失败:", error);
  }
};

// 获取分类下的商品
const fetchCategoryProducts = async categoryName => {
  try {
    console.log("开始获取分类商品数据，分类名:", categoryName);

    // 确保分类名称有效
    if (!categoryName || categoryName === "undefined") {
      console.warn("分类名称无效:", categoryName);
      categoryProducts.value = [];
      return;
    }

    const res = await getProductsByCategoryApi(categoryName);
    console.log(`分类"${categoryName}"的商品数据响应:`, res);

    if (res.success) {
      // 处理返回的商品数据
      let products = [];

      // 根据不同的数据结构处理
      if (Array.isArray(res.data)) {
        // 直接返回商品数组
        products = res.data;
      } else if (res.data && Array.isArray(res.data.items)) {
        // 分页数据结构
        products = res.data.items;
      } else if (res.data && Array.isArray(res.data.data)) {
        // 另一种可能的数据结构
        products = res.data.data;
      }

      console.log("处理后的商品数据:", products);

      // 映射商品数据，使用更通用的图标
      categoryProducts.value = products.map(item => ({
        id: item.id,
        name: item.name || item.title || "未知商品",
        icon: item.icon || "apps-o", // 使用更通用的图标
        image: item.image_url || item.img || item.icon // 添加对不同图片字段的支持
      }));

      console.log("最终显示的商品:", categoryProducts.value);
    } else {
      console.error("获取商品失败:", res.message);
      categoryProducts.value = [];
    }
  } catch (error) {
    console.error("获取分类商品失败:", error);
    categoryProducts.value = [];
  }
};

// 切换分类时加载对应的商品
const onChange = async index => {
  console.log("切换分类，索引:", index);
  active.value = index;

  // 确保索引有效
  if (index >= 0 && index < categories.value.length) {
    const category = categories.value[index];
    console.log("选中的分类:", category);

    if (category) {
      await fetchCategoryProducts(category);
    }
  }
};

// 组件挂载时获取数据
onMounted(() => {
  console.log("组件挂载，开始获取分类数据");
  fetchCategories();
});
</script>

<template>
  <div class="page-container">
    <!-- 顶部搜索框 -->
    <div class="search-bar">
      <van-search
        v-model="searchValue"
        placeholder="请输入商品名称"
        shape="round"
        @search="onSearch"
        background="var(--van-background)"
      />
    </div>

    <div class="category-container">
      <!-- 侧边栏 -->
      <van-sidebar v-model="active" @change="onChange" class="sidebar">
        <van-sidebar-item v-for="(category, index) in categories" :key="index" :title="category" />
      </van-sidebar>

      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 商品网格 -->
        <van-grid
          :column-num="2"
          class="content-grid"
          v-if="categoryProducts && categoryProducts.length > 0"
        >
          <van-grid-item
            v-for="item in categoryProducts"
            :key="item.id"
            :text="item.name"
            @click="() => router.push(`/product/${item.id}`)"
          >
            <template #icon>
              <van-image
                :src="item.image || item.icon"
                fit="cover"
                :width="48"
                :height="48"
                radius="4"
              />
            </template>
          </van-grid-item>
        </van-grid>

        <!-- 加载中状态 -->
        <div v-else-if="!categories.length" class="empty-state">
          <van-loading size="24px" vertical>加载中...</van-loading>
        </div>

        <!-- 空状态提示 -->
        <div v-else class="empty-state">
          <van-icon name="records" size="32" />
          <p>该分类下暂无商品</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--van-background);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.search-bar {
  padding: 8px;
  background-color: var(--van-background);

  :deep(.van-search) {
    padding: 0;
  }

  :deep(.van-search__content) {
    background-color: var(--van-background-2);
  }
}

.category-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 修改侧边栏样式 */
:deep(.sidebar) {
  width: 100px;
  height: 100%;
  background-color: var(--van-background-2);

  .van-sidebar-item {
    padding: 16px 8px;
    color: var(--van-text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; /* 显式设置字体族 */

    &--select {
      color: var(--van-primary-color) !important;
      background-color: var(--van-active-color);
      border-radius: 0 20px 20px 0;
      margin-right: 10px;
      font-weight: 500;
    }

    &__text {
      color: inherit !important;
      font-family: inherit !important; /* 确保字体族继承 */
      font-size: 14px;
      line-height: 1.4;
    }
  }
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background-color: var(--van-background);

  :deep(.content-grid) {
    .van-grid-item {
      background-color: var(--van-background-2);
      border-radius: var(--van-radius-md);
      margin-bottom: 8px;
      overflow: hidden;

      &__content {
        padding: 12px;

        &::after {
          border: none !important;
        }
      }

      &__icon {
        color: var(--van-primary-color);
        font-size: 24px;
      }

      &__text {
        color: var(--van-text-color);
        margin-top: 8px;
        font-size: 14px;
        font-family: inherit;
      }
    }
  }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--van-text-color-3);
  font-family: inherit;

  p {
    margin-top: 10px;
    font-size: 14px;
    font-family: inherit;
  }
}
</style>